<template>
    <view>
        <form @submit="onLogin" class="form">
            <view class="form-item">
                <view class="form-item-label">用户名：</view>
                <view class="form-item-input">
                    <input type="text" name="username" inputmode="text" placeholder="请输入用户名">
                </view>
            </view>

            <view class="form-item">
                <view class="form-item-label">密码：</view>
                <view class="form-item-input">
                    <input type="text" password name="password" inputmode="text" placeholder="请输入密码">
                </view>
            </view>

            <view class="form-item">
                <view class="form-item-label">网关地址：</view>
                <view class="form-item-input">
                    <input type="text" name="gateway" inputmode="url" placeholder="请输入网关地址">
                </view>
            </view>

            <button class="btn" form-type="submit">登录</button>
        </form>
    </view>
</template>

<script>
export default {
    data()
    {
        return {
           
        }
    },
    onShow()
    {
        // 把this存起来
        let that = this;

        uni.getNetworkType({
			success: function (res) {
				if(res.networkType === 'none')
				{
					that.$Tools.ToastError('请先连接网络或者打开移动网络');

					return;
				}
			}
		});
    },
    methods:{
        onLogin(e)
        {
            let values = e.detail.value;

            if(!values.username.trim())
            {
                this.$Tools.ToastError('请输入用户名');

                return;
            }

            if(!values.password.trim())
            {
                this.$Tools.ToastError('请输入密码');

                return;
            }

            if(!values.gateway.trim())
            {
                this.$Tools.ToastError('请输入网关验证地址');

                return;
            }

            // 正则验证是否URL链接
            let HttpReg = new RegExp('^(?:(?:http|https)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$','i')

            if(!HttpReg.test(values.gateway.trim()))
            {
                this.$Tools.ToastError('请输入一个有效的http或者https地址');

                return;
            }

            // 发起请求
            this.$Http.post({
                url:values.gateway + '/pay/index/login',
                params:{
                    username:values.username,
                    password:values.password
                }
            }).then((result) => {
                if(result && result.code === 1)
                {
                    this.$Tools.ToastSuccess({
                        title:result.msg,
                        success:() => {
                            // 设置本地存储
                            uni.setStorageSync('LoginAuth',result.data);

                            // 设置网关的本地存储
                            uni.setStorageSync('gateway',values.gateway);

                            setTimeout(() => {
                                uni.switchTab({
                                    url:'/pages/index/index'
                                });
                            },1500);
                        }
                    });

                    return;
                }else{
                    this.$Tools.ToastError(result.msg);
                    
                    return;
                }
            }).catch((err) => {
                let msg = err.errMsg || err;

                if(msg.includes('No address associated with hostname'))
                {
                    msg = '无效网关地址，请检查网关地址';
                }

                this.$Tools.ToastError(msg);

                return;
            });
        }
    }
}
</script>

<style>
    .form-item{
        padding: 15px 10px 0;
    }

    .form-item-input
    {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }

    .btn{
        width: 80%;
        margin-top: 50px;
    }
</style>